<template>
    <div class="sPmainContent">
			<div class="bar">
				<input type="text" v-model="searchString" placeholder="输入搜索内容">
			</div>
			<ul>
				<li v-for="(article, index) in filterArticles" :key="index">
					<a  v-bind:href="article.url"><img v-bind:src="article.image"/></a>
					<p>{{article.title}}</p>
				</li>
			</ul>
    </div>
</template>
<script>
export default {
  name: 'searchPageDemo',
  data () {
    return {
      title: 'searchPageDemo',
			searchString: '',
			articles: [
				{
					'title': 'What You Need To Know About CSS Variables',
					'url': 'https://www.runoob.com/css/css-tutorial.html',
					'image': 'https://static.runoob.com/images/icon/css.png'
				},
				{
					"title": "Freebie: 4 Great Looking Pricing Tables",
					"url": "https://www.runoob.com/html/html-tutorial.html",
					"image": "https://static.runoob.com/images/icon/html.png"
				},
				{
					"title": "20 Interesting JavaScript and CSS Libraries for February 2016",
					"url": "https://www.runoob.com/css3/css3-tutorial.html",
					"image": "https://static.runoob.com/images/icon/css3.png"
				},
				{
					"title": "Quick Tip: The Easiest Way To Make Responsive Headers",
					"url": "https://www.runoob.com/css3/css3-tutorial.html",
					"image": "https://static.runoob.com/images/icon/css3.png"
				},
				{
					"title": "Learn SQL In 20 Minutes",
					"url": "https://www.runoob.com/sql/sql-tutorial.html",
					"image": "https://static.runoob.com/images/icon/sql.png"
				},
				{
					"title": "Creating Your First Desktop App With HTML, JS and Electron",
					"url": "https://www.runoob.com/js/js-tutorial.html",
					"image": "https://static.runoob.com/images/icon/html.png"
				}
			]
    }
  },
  methods: {
	},
	computed: {
		filterArticles: function () {
			var articles_array = this.articles
			var searchString = this.searchString
			if(!searchString){
				return articles_array
			}
			searchString = searchString.trim().toLowerCase()
			articles_array = articles_array.filter(function(item){
				if(item.title.toLowerCase().indexOf(searchString) != -1){
					return item
				}
			})
			return articles_array
		}
	}
}
</script>
<style>

*{
  margin: 0;
  padding: 0;
}

.sPmainContent{
  font:15px/1.3 'Open Sans', sans-serif;
	color: #5e5b64;
	text-align:center;
}

.sPmainContent .bar{
	background-color:#5c9bb7;

	background-image:-webkit-linear-gradient(top, #5c9bb7, #5392ad);
	background-image:-moz-linear-gradient(top, #5c9bb7, #5392ad);
	background-image:linear-gradient(top, #5c9bb7, #5392ad);

	box-shadow: 0 1px 1px #ccc;
	border-radius: 2px;
	width: 400px;
	padding: 14px;
	margin: 45px auto 20px;
	position:relative;
}

.sPmainContent .bar input{
	background:#fff no-repeat 13px 13px;
	background-image:url();

	border: none;
	width: 100%;
	line-height: 19px;
	padding: 11px 0;

	border-radius: 2px;
	box-shadow: 0 2px 8px #c4c4c4 inset;
	text-align: left;
	font-size: 14px;
	font-family: inherit;
	color: #738289;
	font-weight: bold;
	outline: none;
	text-indent: 40px;
}

.sPmainContent ul{
	list-style: none;
	width: 428px;
	margin: 0 auto;
	text-align: left;
}

.sPmainContent ul li{
	border-bottom: 1px solid #ddd;
	padding: 10px;
	overflow: hidden;
}

.sPmainContent ul li img{
	width: 60px;
	height: 60px;
	float: left;
	border: none;
}

.sPmainContent ul li p{
	margin-left: 75px;
	font-weight: bold;
	padding-top: 12px;
	color: #6e7a7f;
}

</style>

